import React, { useState } from 'react'
import './index.scss'
import NavBar from '../../../components/nav-bar'
import {message} from '../../../components/message'
import axios from '../../../utils/axios'
import {useHistory} from 'react-router-dom'
// import T from 'prop-types'

export default function CreateGroup(props) {
    const [selectId, setSelectId] = useState(0)
    const history = useHistory()
    // const history = useHistory()
    const List = ['学习', '交友', '交易', '城市', '技术']
    const handleSubmit = (e) => {
    e.preventDefault()
    // 输入框的文字
    console.log(e.target[1].value)
    // 节点：
    console.log(selectId)
    let params = {
      groupName: e.target[1].value,
      introduction: e.target[2].value,
      type: selectId,
    }
    if (!params.groupName) {
      message('标题不能为空')
      return
    }
    if (!params.introduction) {
      message('内容不能为空')
      return
    }
     console.log(params)
     // 在这里提交给服务器
     axios
       .post('/group/addGroup', params)
       .then((res) => {
         console.log(res.data)
   
         if (res.data.code === 0) {
           // 显示弹窗
          message('创建成功')
           setTimeout(() => {
             history.go(-1)
           }, 1000)
         }
       })
       .catch(() => {
         // 返回到上一页
               setTimeout(() => {
                 history.go(-1)
               }, 1000)
         message('创建失败')
       })
}
  const UpBtn = <input type="submit" value="创建" className="up-btn"></input>
  return (
    <div>
      <div className="add-detail">

        <form onSubmit={handleSubmit}>
          <NavBar roomName="创建群聊" right={UpBtn}></NavBar>
          {/* 输入框 */}
          <textarea
            placeholder="请输入--群聊名称"
            className="add-detail-input-title"
            maxLength={'500'}
            minLength={'1'}
          ></textarea>
          <textarea
            placeholder="一句话介绍一下群吧~"
            className="add-detail-input"
            maxLength={'500'}
            minLength={'1'}
          ></textarea>
          {/* 选择节点 */}
          <div className="add-detail-node">
            <span>选择群类型:</span>
            {List.map((item, index) => (
              <div
                className="node-item"
                onClick={() => {
                  setSelectId(index)
                }}
                style={{ backgroundColor: selectId === index ? '#a2d5f2' : '' }}
              >
                {item}
              </div>
            ))}
          </div>
        </form>
      </div>
    </div>
  )
}
CreateGroup.propTypes = {}
